<template>
<!-- 党建工作 -->
  <div>
     <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header"  left-arrow @click-left="$router.go(-1)"/>
    <!-- 1我的基本信息 -->
    <div class="party" @click="onInfor">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/wodejiben.png" alt="">
        </em>
        <span>我的基本信息</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 2我的收藏 -->
    <div class="party" @click="onCollection">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/wodeshou.png" alt="">
        </em>
        <span>我的收藏</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 3志愿者消息通知 -->
    <div class="party" @click="voluNotice">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/zhiyuan.png" alt="">
        </em>
        <span>志愿者消息通知</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 4我参与的活动 -->
    <div class="party" @click="joinNservi">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/wocanyude.png" alt="">
        </em>
        <span>我参与的活动</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 5我的报名 -->
    <div class="party" @click="signUp">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/woyaobao.png" alt="">
        </em>
        <span>我的报名</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!--6 其他 -->
    <div class="party" @click="onOther">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/qita.png" alt="">
        </em>
        <span>其他</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 7拓展服务 -->
    <div class="party" @click="onPay">
      <div class="fl party-img">
        <em>
          <img src="../../assets/img/onservice/yuozhuan.png" alt="">
        </em>
        <span>拓展服务</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      header: "Q服务",
      userId:sessionStorage.getItem('userId')
    }
  },
  
  methods:{
    // 1我的基本信息
    onInfor(){
      this.$router.push({path:"../community/ComList/listoNservice/infor"});
    },
    // 2我的收藏
    onCollection(){
      this.$router.push({path:"../community/ComList/listoNservice/onCollection"});
    },
    // 3志愿者消息通知
    voluNotice(){
      this.$router.push({path:"./ComList/listoNservice/voluNotice"});
    },
    //4 我参与的活动
    joinNservi(){
      this.$router.push({path:"./ComList/listoNservice/joinNservi"});
    },
    //5 我的报名
    signUp(){
      this.$router.push({path:"./ComList/listoNservice/signUp"});
    },
    //6 其他
    onOther(){
      this.$router.push({path:"./ComList/listoNservice/other"});
    },
    // 6缴费通道（预留接口)
    onPay(){
      this.$router.push({path:"./ComList/listoNservice/onPay"});
    }
  }
}
</script>
<style scoped>
  .van-cell{
    width: 92%;
    margin: .4rem auto;
    border-radius: 4px;
    padding: 0;
    /* padding: 10px 15px; */
}
.party::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.party{
   width: 92%;
    margin: .4rem auto;
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    background-color: #ffffff;
    position: relative;
} 
.party-img em{
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.party-img span{
  display: inline-block;
  font-size: 0.5rem;
      font-size: 0.7rem;
    font-weight: 600;
}
/*右箭头*/
.right{
    width:20px;
    height:20px;
    position:absolute;
    right:0;
    top: 0.8rem;
}
 .right-arrow1,.right-arrow2{
  width:0;
  height:0;
  display:block;
  position:absolute;
  left:0;
  top:0;
  border-top:10px transparent dashed;
  border-right:10px transparent dashed;
  border-bottom:10px transparent dashed;
  border-left:10px white solid;
  overflow:hidden;
}
.right-arrow1{
  left:1px;/*重要*/
  border-left:10px #000000 solid;
}
.right-arrow2{
  border-left:10px white solid;
}
</style>